<script lang="ts">
import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { getUserJob } from '../api/User'
import { playerTime, vidotime, filters } from '../hooks/filters'
import { useScroll } from '../hooks/useScroll'
export default defineComponent({
  props: ['useractive'],
  setup(props) {
    let router: any = useRouter();
    let route: any = useRoute();
    //用户id
    let userid: number = route.query.userid;
    //用户作品
    let userJob: any = ref([]);
    let useractive = props.useractive;

    let page: number = 1;
    let order: any = ref('default');
    let scrollTop = ref<number>(document.documentElement.scrollTop);
    let isbottom = ref(false);
    let isloading: any = ref(false);
    let total: any = ref();
    //获取用户作品数据
    let getUserJobFun = (userid: number, page: number, order:any) => {
      getUserJob(userid, {
        order: order,
        page: page
      }).then((data) => {
        console.log('组件中用户作品=>', data);
        total.value = data.data.total;
        data.data.list.forEach((item: any) => {
          userJob.value.push( item)
        })
        // userJob.value.push( data.data.list)
        console.log('组件中用户作品=userJob>', userJob.value)
      })
    };
    //点击视频
    let click_video = (videoid: any, video_library_id: any) => {
      router.push({
        path: '/videoDes',
        query: {
          aid: videoid,
          mid: video_library_id,
          useractive,
          userid,

        }
      })
    }

    let onscroll = () => {
      scrollTop.value = document.documentElement.scrollTop;
      isbottom.value = useScroll(document.documentElement).scrollListenerHandler();
      console.log('9999999999999', isbottom.value)
    }
    watch(isbottom, () => {
      console.log(page*10,total.value)
      if (page * 10 >= total.value) {
        console.log(111111111);
        return;
      }
      if (isbottom.value) {
        page += 1;
        isloading.value = true;
        console.log('222222222page=>', page);
  
        console.log('isloading', isloading.value);
        setTimeout(() => {
          isloading.value = false;
          console.log('222222222page=>', page);
        getUserJobFun(userid, page, order)
        }, 500)

      }

    })

    //切换作品排序按钮
    let changetab = (value: any) => {
      userJob.value = [];
      console.log('切换了按钮value=>', value);
      switch (value.name) {
        case 'default':
          getUserJobFun(userid, 1, 'default'); //获取用户作品
          break
        case 'hot':
          getUserJobFun(userid, 1, 'view'); //获取用户作品
          break
        case 'new':
          getUserJobFun(userid, 1, 'new');//获取用户作品
          break
      }
    }
    let myvideojson: any = localStorage.getItem("myvideo");
    let myvideoArr: any = ref(JSON.parse(myvideojson) || []);
    console.log(myvideoArr.value);
    let tomyvideo = (videoid: any) => {
      router.push({
        path: '/myvideo',
        query: {
          videoid
        }
      })
    };
    let localStorageid: any = ref(localStorage.getItem('userId'));
    onMounted(() => {
      getUserJobFun(userid, page, order) //获取用户作品
      window.addEventListener('scroll', onscroll);

    });

    onUnmounted(() => {
      window.removeEventListener('scroll', onscroll)
    })
    console.log(userid, localStorageid.value)
    return {
      userJob,
      filters,
      playerTime,
      vidotime,
      changetab,
      click_video,
      myvideoArr,
      tomyvideo,
      userid,
      localStorageid,
      isloading,
      total
    }
  }
})
</script>
<template>
  <div class="job" v-if="userJob">
    <p v-if="userJob.total + myvideoArr.length == 0">还没有发布作品哦~</p>
    <van-tabs color="transparent" @click-tab="changetab" v-else>
      <van-tab title="默认排序" name="default">
        <!-- 自己发布的作品 -->
        <div class="drafList" v-if="userid == localStorageid">
          <p v-if="userJob.total + myvideoArr.length == 0">还没有发布过视频哦~</p>
          <ul v-else>
            <li v-for="item in myvideoArr" @click="tomyvideo(item.videoid)">
              <div class="image">
                <img :src="item.avator" alt="">
                <div class="mask">

                </div>
              </div>
              <div class="word">
                <div class="title">
                  <p v-if="item.title">{{ item.title }}</p>
                </div>
                <div class="des title">
                  <p v-if="item.des">{{ item.des }}</p>
                </div>
                <div class="des title time">
                  <p v-if="item.time">发布于{{ new Date(item.time).toLocaleString() }}</p>
                </div>
                <div class="count">
                  {{ filters(0) }}喜欢 ·
                  {{ filters(0) }}观看
                </div>
              </div>
            </li>
          </ul>

        </div>
        <!-- g -->
        <div class="joblist" v-if="userJob">
          <!-- 自己发布的视频 -->

          <!-- 作品列表 -->
          <ul>
            <li v-for="(item, index) in userJob" :key="index"
              @click.stop="click_video(item.resource.id, item.resource.vid)">
              <div class="image">
                <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
                <img :src="item.resource.cover+'?param=5y5'" alt="" />
                <div class="float">{{ vidotime(item.resource.duration) }}</div>
              </div>
              <div class="right">
                <div class="des text-cut">
                  {{ item.resource.title }}
                </div>
                <div class="time">{{ playerTime(item.resource.publish_time * 1000) }}</div>
                <div class="count">
                  {{ filters(item.resource.count.count_like) }}喜欢 ·
                  {{ filters(item.resource.count.count_view) }}观看
                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="热门排序" name="hot">
        <div class="joblist" v-if="userJob">
          <!-- 自己发布的视频 -->

          <!-- 作品列表 -->
          <ul>
            <li v-for="(item, index) in userJob" :key="index"
              @click.stop="click_video(item.resource.id, item.resource.vid)">
              <div class="image">
                <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
                <img :src="item.resource.cover+'?param=5y5'" alt="" />
                <div class="float">{{ vidotime(item.resource.duration) }}</div>
              </div>
              <div class="right">
                <div class="des text-cut">
                  {{ item.resource.title }}
                </div>
                <div class="time">{{ playerTime(item.resource.publish_time * 1000) }}</div>
                <div class="count">
                  {{ filters(item.resource.count.count_like) }}喜欢 ·
                  {{ filters(item.resource.count.count_view) }}观看
                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="最新上传" name="new">
        <div class="joblist" v-if="userJob">
          <!-- 自己发布的视频 -->

          <!-- 作品列表 -->
          <ul>
            <li v-for="(item, index) in userJob" :key="index"
              @click.stop="click_video(item.resource.id, item.resource.vid)">
              <div class="image">
                <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
                <img :src="item.resource.cover+'?param=5y5'" alt="" />
                <div class="float">{{ vidotime(item.resource.duration) }}</div>
              </div>
              <div class="right">
                <div class="des text-cut">
                  {{ item.resource.title }}
                </div>
                <div class="time">{{ playerTime(item.resource.publish_time * 1000) }}</div>
                <div class="count">
                  {{ filters(item.resource.count.count_like) }}喜欢 ·
                  {{ filters(item.resource.count.count_view) }}观看
                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-loading size="24px" v-if="userJob.length!=total&&isloading" style="text-align: center;line-height:40px;">加载中...</van-loading>
      <p style="text-align: center;font-size: 14px;background-color:#fff;line-height:40px;color: #a5a5a5;" v-if="userJob.length==total">暂无更多了~</p>
    </van-tabs>
  </div>
</template>
<style lang="scss" scoped>
.job {
  background-color: #f7f7f7;

  &>p {
    font-size: 14px;
    width: 100%;
    height: 302px;
    line-height: 302px;
    text-align: center;
    color: #bbbbbb;
  }
}

::v-deep .van-tabs__wrap {
  margin-bottom: 10px;
}

.desbar {
  display: flex;
  line-height: 44px;
  padding: 0 10px;
  position: sticky;
  z-index: 10;
  top: 0;

  span {
    font-size: 18px;
    font-weight: 600;
  }

  h2 {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;

    // margin-left: 50px;
  }
}

.drafList {
  padding: 5px 15px;
  background-color: #fff;

  &>p {
    text-align: center;
    color: #a8a5a5;
  }

  ul {
    li {
      display: flex;
      margin-bottom: 10px;
      align-items: center;

      .image {
        position: relative;
        width: 154px;

        img {
          width: 154px;
          height: auto;
          border-radius: 10px;
        }

        .mask {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(0%, -50%);
          color: #fff;
          font-size: 12px;
          width: 0;
          height: 0;
          border: 10px solid transparent;
          border-left: 15px solid #fff;
        }
      }

      .word {
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .title {
          font-size: 16px;
          margin-bottom: 2px;
          font-weight: 600;

          p {
            font-size: 12px;
            color: #2e2e2e;
            line-height: 20px;
            font-weight: 600;
          }

          span {
            color: #a8a5a5;
          }
        }

        .des {
          font-weight: normal;
          font-size: 12px;
        }

        .time {
          p {
            color: #a8a5a5;
            font-size: 12px;

          }

        }
      }

      .count {
        line-height: 26px;
        font-size: 12px;
        color: #636363;
      }
    }
  }
}

.joblist {
  ul {
    // padding:0 15px;
    li {
      height: 116px;
      width: 100%;
      padding: 0 15px 15px 15px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background-color: #fff;
      border-bottom: 1px solid #f5f5f5;

      .image {
        position: relative;

        img {
          width: 154px;
          height: 86px;
          border-radius: 5px;
        }

        .float {
          position: absolute;
          bottom: 5px;
          right: 5px;
          color: #fff;
          font-size: 12px;
        }
      }

      .right {
        margin-left: 12px;
        margin-right: 15px;
      }

      .des {
        font-size: 12px;
        color: #2e2e2e;
        line-height: 20px;
        font-weight: 600;
      }

      .time {
        font-size: 12px;
        color: #cdcdcd;
        line-height: 20px;
      }

      .count {
        line-height: 26px;
        font-size: 12px;
        color: #636363;
      }
    }
  }
}
</style>